<template>
  <div class="page-container">
    <div class="w-h-full padding-20 flex card glass">
      <div class="flex-14"></div>
      <div class="flex-10 relative">
        <SwitchTheme class="fr" />
        <div class="absolute-center card">
          <KeepAlive>
            <component :is="componentId" @changeMode="changeMode"></component>
          </KeepAlive>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="login">
import { shallowRef } from 'vue'
import SwitchTheme from '@/components/SwitchTheme/SwitchTheme.vue'
import LoginForm from './components/LoginForm.vue'
import RegisterForm from './components/RegisterForm.vue'

const componentId = shallowRef(LoginForm)

function changeMode(e) {
  switch (e) {
    case 'login':
      componentId.value = LoginForm
      break
    case 'register':
      componentId.value = RegisterForm
      break
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 50px;
  background-image: url('@/assets/svgs/login_bg.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
